<template>
	<view>
		<view
			class="bg-white"
			:style="{
				height: statusBarHeight + 'px',
				position: 'fixed',
				left: 0,
				top: 0,
				right: 0,
				zIndex: 999,
			}"
		></view>
		
		<view class="mainBgColor pad-t-60" style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;">
			<view class="flex align-center mar-x-15 pad-b-80">
				<view class="mar-r-20">
					<image :src="avatarUrl ? uploadIp + getAvatarUrl(avatarUrl) : defaultAvatarUrl" mode="widthFix" class="w-px-80 h-px-80 radius-50" />
				</view>
				
				<view class="color-white">
					<view class="font-18 font-b-800">
						<text>{{ greet }}，{{ username }} !</text>
					</view>
					
					<view class="font-14">
						<text class="mar-r-10">{{ currentDate }}</text>
						<text>{{ currentWeek }}</text>
					</view>
				</view>
			</view>
			
			<view
				class="pos-a"
				:style="{
					right: '15px',
					top: getPlatform() === 'h5' ? '25px' : '40px'
				}"
				@click="toSettingPage()"
			>
				<u-icon name="setting" color="#ffffff" size="24"></u-icon>
			</view>
		</view>
		
		<view class="mar-x-15" style="margin-top: -40px; padding-bottom: 40px;">
			<Card
				class="mar-b-10"
				v-for="(item, index) in menuList"
				:key="index"
				:menuId="item.menuId"
				:title="item.title"
				:titleIconSize="item.titleIconSize"
				:isMsg="item.isMsg"
				:msgCount="item.msgCount"
				:iconType="item.iconType"
				:titleIcon="item.titleIcon"
				:list="item.arr"
				:isRightContent="item.isRightContent"
				:rightIcon="item.rightIcon"
				:rightContent="item.rightContent"
				@handleModuleClick="handleModuleClick"
				@handleRightClick="handleRightClick"
			/>
		</view>
	</view>
</template>

<script>
	import Card from '@/components/Card/index'
	import Utils from '@/utils/utils'
	import Settings from '@/utils/settings'
	
	import { mapState } from 'vuex'
	import { menuData } from '@/utils/data'
	import { getToGreet, getCurrentDate, getCurrentWeek, checkLogin, getSystemDate, getStaticUrl } from '@/utils/lib'
	import { getModuleMsgNotice } from '@/apis/common'
	
	export default {
		components: {
			Card
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList,
				username: state => state.user.username,
				avatarUrl: state => state.user.avatarUrl,
				defaultAvatarUrl: state => state.user.defaultAvatarUrl,
			}),
			
			// 获取当前平台
			getPlatform() {
				return () => {
					let platform = process.env.VUE_APP_PLATFORM
					
					return platform
				}
			},
			
			// 获取头像
			getAvatarUrl() {
				return (url) => {
					return getStaticUrl(url)
				}
			}
		},
		
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				greet: getToGreet(), // 问候语
				currentDate: getCurrentDate(), // 当前日期
				currentWeek: getCurrentWeek(), // 当前周几
				menuList: [], // 菜单列表
				uploadIp: Settings.uploadIp + '/', // 图片地址
			}
		},
		
		onShow() {
			checkLogin()
			// 初始化菜单
			this.initMenu()
			this.findModuleMsgNotice()
		},
		
		beforeMount() {
			// 获取状态栏高度
			this.getNavBarHeight()
		},
		
		methods: {
			// 获取各个模块页面消息通知提示
			findModuleMsgNotice() {
				let menuList = JSON.parse(JSON.stringify(this.menuList))
				let MenuList = []
				
				menuList.forEach(item => {
					if (item.menuId !== '-1') {
						// 除了工单外，因为工单不是从数据库查询得到的，此处需要根据后端对照
						let List = []
						
						item.arr.forEach((j, i) => {
							List.push({
								Key: j.key,
							})
						})
						
						MenuList.push({
							MenuId: item.menuId,
							List,
						})
					}
				})
				
				let params = { MenuList }
				
				getModuleMsgNotice(params, this.token, this.longitude + ',' + this.latitude).then(res => {
					let data = res.Result.MenuList
					
					data.forEach(item => {
						this.menuList.forEach(j => {
							if (item.MenuId === j.menuId) {
								if (item.Total > 0) {
									j.isMsg = true
									j.msgCount = item.Total
									
									item.List.forEach(h => {
										j.arr.forEach(x => {
											if (h.Key === x.key && h.Value !== 0) {
												x.isMsg = true
												x.msgCount = h.Value
											}
										})
									})
								}
							}
						})
					})
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 获取状态栏高度
			getNavBarHeight() {
				uni.getSystemInfo({
					success: res => {
						let isIOS = res.system.indexOf('iOS') > -1
						this.statusBarHeight = res.statusBarHeight
						
						if (isIOS) {
							this.barHeight = 45
						} else {
							this.barHeight = 47
						}
					}
				})
			},
			
			// 初始化菜单
			initMenu() {
				let menuPermissions = this.$store.state.user.menuPermissions
				let arr = []
				
				menuData.forEach(j => {
					menuPermissions.forEach(item => {
						if (j.title === item.MenuName) {
							j.menuId = item.MenuId
							arr.push(j)
						}
					})
					
					if (j.title === '我的工单') {
						arr.push(j)
					}
				})
				
				this.menuList = arr
				
				// 写页面时先不用权限菜单，展示所有的，打包部署时，需要放开上面的权限检测
				// this.menuList = menuData
			},
			
			// 跳转到设置页面
			toSettingPage() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			
			// 点击卡片时的回调
			handleModuleClick(item, menuId) {
				if (!item.url) {
					Utils.popUpMsg('error', '未开放，请等待', 1500)
					return
				}
				
				uni.navigateTo({
					url: item.url
				})
			},
			
			// 点击右侧时的回调
			handleRightClick(menuId) {
				let menu = this.menuList.filter(item => item.menuId === menuId)[0]
				
				if (menu.title === '现场维修' && menu.menuId === 'HMP_003_M09') {// 1 
					// 申请任务
					uni.navigateTo({
						url: '/pages/repairManage/applyTask/applyTask'
					})
				} else if (menu.title === '派工' && menu.menuId === 'HMP_003_M02') {// 6 HMP_003_M02
					// 我要派工
					uni.navigateTo({
						url: '/pages/dispatchWorkManage/dispatch/dispatch'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/scss/variable.module.scss";
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #fff;
	}
	
	.mainBgColor {
		background-color: $mainBgColor;
	}
</style>
